/*
 * @Description: 所有echarts初始化
 * @Author: huxianc
 * @Date: 2020-12-08 09:11:53
 * @LastEditors: huxianc
 * @LastEditTime: 2020-12-09 14:16:37
 */

/**
 * @description: echarts resize 事件
 * @param {object} chart chart对象
 * @return {*}
 */
function chartResize(chart) {
  function resize() {
    if (chart) {
      chart.resize();
    }
  }

  window.addEventListener("resize", debounce(resize));
}

initLiquid("#liquid");
/**
 * @description: 初始化水球图
 * @param {*} dom dom元素
 * @param {number} value 显示的值
 * @return {*}
 */
function initLiquid(dom) {
  var value =
    arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 99;
  var chart = echarts.init($q(dom));

  var data = [0.3, 0.25, 0.2];

  var option = {
    title: {
      text: value + "{a|分}",
      //text: (value * 100).toFixed(0) + '{a|%}',
      textStyle: {
        fontSize: 70,
        fontFamily: "electronicFont",
        fontWeight: "normal",
        color: "#d4e7ff",
        rich: {
          a: {
            fontSize: 26,
            padding: [-28, 0, 0, 0],
          },
        },
      },
      x: "center",
      y: "center",
    },
    graphic: [
      {
        type: "group",
        left: "center",
        top: "64%",
        children: [
          {
            type: "text",
            z: 100,
            left: "10",
            top: "middle",
            style: {
              fill: "#d4e7ff",
              text: "今日总得分",
              font: "14px Microsoft YaHei",
              backgroundColor: "rgb(0,0,0,0.5)",
            },
          },
        ],
      },
    ],
    series: [
      {
        type: "liquidFill",
        radius: "80%",
        center: ["50%", "50%"],
        // shape: 'roundRect',
        data: data,
        backgroundStyle: {
          color: {
            type: "linear",
            x: 1,
            y: 0,
            x2: 0.5,
            y2: 1,
            colorStops: [
              {
                offset: 1,
                color: "rgba(68, 145, 253, 0)",
              },
              {
                offset: 0.5,
                color: "rgba(68, 145, 253, .25)",
              },
              {
                offset: 0,
                color: "rgba(68, 145, 253, 1)",
              },
            ],
            globalCoord: false,
          },
        },
        outline: {
          borderDistance: 0,
          itemStyle: {
            borderWidth: 20,
            borderColor: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: "rgba(69, 73, 240, 0)",
                },
                {
                  offset: 0.5,
                  color: "rgba(69, 73, 240, .25)",
                },
                {
                  offset: 1,
                  color: "rgba(69, 73, 240, 1)",
                },
              ],
              globalCoord: false,
            },
            shadowBlur: 10,
            shadowColor: "#000",
          },
        },
        color: {
          type: "linear",
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 1,
              color: "rgba(58, 71, 212, 0)",
            },
            {
              offset: 0.5,
              color: "rgba(31, 222, 225, .2)",
            },
            {
              offset: 0,
              color: "rgba(31, 222, 225, 1)",
            },
          ],
          globalCoord: false,
        },
        label: {
          normal: {
            formatter: "",
          },
        },
      },
    ],
  };

  chart.setOption(option);

  chartResize(chart);
}

initLine("#line");
/**
 * @description: 初始化折线图
 * @param {*} dom
 * @param {Array<string>} xData
 * @param {Array<number>} yData
 * @return {*}
 */
function initLine(dom) {
  var xData =
    arguments.length > 1 && arguments[1] !== undefined
      ? arguments[1]
      : ["11-20", "11-21", "11-22", "11-23", "11-24", "11-25", "11-26"];
  var yData =
    arguments.length > 2 && arguments[2] !== undefined
      ? arguments[2]
      : [96, 99, 95, 85, 96, 93, 97];
  var chart = echarts.init($q(dom));
  var option = {
    title: {
      text: "近七日得分趋势",
      textStyle: {
        color: "#fff",
        fontSize: 14,
        fontFamily: "MicrosoftYaHei",
        fontWeight: "normal",
      },
      top: "5%",
      left: "right",
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        lineStyle: {
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "rgba(0, 255, 233,0)",
              },
              {
                offset: 0.5,
                color: "rgba(255, 255, 255,1)",
              },
              {
                offset: 1,
                color: "rgba(0, 255, 233,0)",
              },
            ],
            global: false,
          },
        },
      },
    },
    grid: {
      top: "15%",
      left: "8%",
      right: "5%",
      bottom: "15%",
      // containLabel: true
    },
    xAxis: [
      {
        type: "category",
        axisLine: {
          lineStyle: {
            color: "rgba(31,84,165,1)",
          },
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          color: "#fff",
        },
        splitLine: {
          show: false,
        },
        boundaryGap: true,
        data: xData,
      },
    ],

    yAxis: [
      {
        type: "value",
        scale: true,
        max: 100,
        splitNumber: 5,
        splitLine: {
          lineStyle: {
            color: "rgba(31,84,165,0.5)",
          },
        },
        axisLine: {
          // show: false,
          lineStyle: {
            color: "rgba(31,84,165,1)",
          },
        },
        axisLabel: {
          textStyle: {
            color: "#d1e6eb",
          },
        },
        axisTick: {
          show: false,
        },
      },
    ],
    series: [
      {
        name: "得分",
        type: "line",
        smooth: true, //是否平滑
        showAllSymbol: true,
        // symbol: 'image://./static/images/guang-circle.png',
        symbol: "circle",
        symbolSize: 8,
        lineStyle: {
          width: 5,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "rgba(33, 150, 250, 1)",
            },
            {
              offset: 0.5,
              color: "rgba(63, 212, 255, 1)",
            },
            {
              offset: 1,
              color: "rgba(70, 210, 149, 1)",
            },
          ]),
        },
        label: {
          show: true,
          position: "bottom",
          textStyle: {
            color: "#fff",
          },
        },
        itemStyle: {
          color: "#fff",
          borderColor: "rgba(14, 156, 255, 1)",
          borderWidth: 2,
        },
        tooltip: {
          // show: false,
        },
        data: yData,
      },
    ],
  };
  chart.setOption(option);

  chartResize(chart);
}

initPie("#pie1");
initPie("#pie2", ["rgba(255, 146, 161, 0.2)", "rgba(255, 71, 97, 1)"]);
initPie("#pie3");
initPie("#pie4", ["rgba(167, 255, 218, 0.3)", "rgba(43, 209, 139, 1)"]);
initPie("#pie5", ["rgba(255, 196, 143, 0.3)", "rgba(248, 132, 28, 1)"]);
initPie("#pie6");
/**
 * @description: 初始化pie图
 * @param {*} dom
 * @param {[string,string]} colors 渐变数组
 * @param {number} value 值
 * @return {*}
 */
function initPie(dom) {
  var colors =
    arguments.length > 1 && arguments[1] !== undefined
      ? arguments[1]
      : ["rgba(122, 198, 255, 0.2)", "rgba(30, 159, 255, 1)"];
  var value =
    arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 85;
  var chart = echarts.init($q(dom));
  var option = {
    title: {
      text: value,
      textStyle: {
        fontSize: 30,
        fontWeight: "normal",
        color: "#fff",
      },
      left: "center",
      top: "35%",
    },
    tooltip: {
      show: false,
    },
    series: [
      {
        type: "pie",
        radius: ["50%", "70%"],
        hoverAnimation: false,
        clockwise: false,
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: "center",
        },

        labelLine: {
          show: false,
        },
        data: [
          {
            value: value,
            name: "直接访问",
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                  {
                    offset: 0,
                    color: colors[0],
                  },
                  {
                    offset: 1,
                    color: colors[1],
                  },
                ]),
              },
            },
          },
          {
            value: 100 - value,
            name: "邮件营销",
            itemStyle: {
              normal: {
                color: "transparent",
              },
            },
          },
        ],
      },
    ],
  };
  chart.setOption(option);

  chartResize(chart);
}

initRadar("#radar");
/**
 * @description: 初始化雷达图
 * @param {*} dom
 * @param {Array} data
 * @return {*}
 */
function initRadar(dom) {
  var data =
    arguments.length > 1 && arguments[1] !== undefined
      ? arguments[1]
      : [
          {
            name: "改造难度",
            value: 85,
          },
          {
            name: "服刑能力",
            value: 90,
          },
          {
            name: "改造情况",
            value: 86,
          },
          {
            name: "社会支持",
            value: 84,
          },
          {
            name: "危险等级",
            value: 90,
          },
        ];
  var chart = echarts.init($q(dom));
  var max = 100;
  var indicator = [];
  var values = [];
  data.forEach(function (item) {
    indicator.push({
      name: item.name,
      max: max,
    });
    values.push(item.value);
  });
  var colors = [
    "rgba(255,255,255,0.5)",
    "rgba(255,255,255,0.4)",
    "rgba(255,255,255,0.3)",
    "rgba(255,255,255,0.2)",
    "rgba(255,255,255,0.1)",
  ];
  var option = {
    tooltip: {
      show: true,
      backgroundColor: "rgba(13, 178, 255, .8)",
      borderColor: "rgba(13, 178, 255, 1)",
      borderWidth: 2,
      textStyle: {
        align: "left",
      },
    },
    radar: {
      // shape: 'circle',
      name: {
        textStyle: {
          color: "rgba(212,231,255,0.9)",
          fontSize: 12,
          padding: [0, -10],
        },
      },
      indicator: indicator,
      radius: "50%",
      center: ["50%", "50%"],
      splitNumber: 5,
      splitArea: {
        areaStyle: {
          color: colors,
        },
      },
      splitLine: {
        lineStyle: {
          color: ["rgba(255,255,255,0.3)"].reverse(),
          width: 1,
        },
      },
      axisLine: {
        lineStyle: {
          color: "rgba(238,238,238, 0.2)",
        },
      },
    },
    series: [
      {
        type: "radar",
        // areaStyle: {normal: {}},
        data: [
          {
            value: values,
            // name: "改造难度",
          },
        ],
        symbol: "circle",
        symbolSize: 6,
        itemStyle: {
          normal: {
            color: "#fff",
            borderColor: "rgba(14, 156, 255, .8)",
            borderWidth: 2,
            shadowBlur: 4,
            shadowColor: "rgba(255, 255, 255, .8)",
          },
        },
        areaStyle: {
          normal: {
            color: "rgba(13, 178, 255, 0.49)",
          },
        },
        lineStyle: {
          normal: {
            color: "rgba(2, 99, 255, 1)",
            width: 2,
          },
        },
      },
    ],
  };
  chart.setOption(option);

  chartResize(chart);
}

initBar("#bar");
/**
 * @description:
 * @param {*} dom
 * @param {Array} data
 * @return {*}
 */
function initBar(dom) {
  var data =
    arguments.length > 1 && arguments[1] !== undefined
      ? arguments[1]
      : [
          {
            name: "亲情帮教",
            value: 10,
          },
          {
            name: "社会帮教",
            value: 8,
          },
          {
            name: "亲情电话",
            value: 2,
          },
          {
            name: "会见",
            value: 4,
          },
          {
            name: "信件",
            value: 10,
          },
        ];
  var chart = echarts.init($q(dom));
  var xData = [];
  var yData = [];
  data.forEach(function (item) {
    yData.push(item.name);
    xData.push(item.value);
  });

  var colors = [
    ["rgba(15, 161, 155, 0)", "rgba(23, 250, 221, 0.64)"],
    ["rgba(60, 149, 175, 0)", "rgba(96, 229, 249, 0.58)"],
    ["rgba(42, 95, 139, 0)", "rgba(90, 190, 254, 0.68)"],
    ["rgba(13, 68, 145, 0)", "rgba(114, 170, 252, 1)"],
    ["rgba(11, 60, 169, 0)", "rgba(30, 159, 255, 1)"],
  ];

  var option = {
    tooltip: {
      show: false,
      backgroundColor: "rgba(13, 178, 255, .8)",
      borderColor: "rgba(13, 178, 255, 1)",
      borderWidth: 2,
      trigger: "axis",
      axisPointer: {
        // 坐标轴指示器，坐标轴触发有效
        type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
        label: {},
      },
    },
    grid: {
      left: "10px",
      right: "30px",
      bottom: "-10px",
      top: "10px",
      containLabel: true,
    },
    yAxis: {
      type: "category",
      data: yData,
      axisLine: {
        show: false,
        lineStyle: {
          color: "rgba(212,231,255,0.9)",
          fontSize: 14,
        },
      },
      axisLabel: {
        // interval: 0,
        // rotate: 40,

        textStyle: {
          fontFamily: "Microsoft YaHei",
        },
      },
      axisTick: {
        show: false,
      },
      splitLine: {
        show: false,
      },
    },
    xAxis: {
      type: "value",
      show: false,
      //max: '200',
      axisLine: {
        show: false,
        lineStyle: {
          color: "rgba(212,231,255,0.9)",
          fontSize: 14,
        },
      },
      axisTick: {
        show: false,
      },
      splitLine: {
        show: false,
        lineStyle: {
          type: "dotted",
          color: "rgba(255,255,255,0.2)",
        },
      },
      axisLabel: {},
    },
    series: [
      {
        type: "bar",
        itemStyle: {
          normal: {
            barBorderRadius: 30,
          },
        },
        barWidth: "22",
        color: function (params) {
          return new echarts.graphic.LinearGradient(1, 0, 0, 0, [
            {
              offset: 0,
              color: colors[params.dataIndex][0],
            },
            {
              offset: 1,
              color: colors[params.dataIndex][1],
            },
          ]);
        },
        data: xData,
        label: {
          show: true,
          position: "right",
          fontSize: 14,
          color: "#fff",
        },
      },
      {
        type: "pictorialBar",
        //symbol: "diamond",
        symbolSize: [8, 22],
        symbolOffset: [0, 0],
        symbolPosition: "end",
        z: 12,
        color: "rgba(2,195,241,0.6)",
        data: xData,
      },
    ],
  };

  chart.setOption(option);

  chartResize(chart);
}
